<template>
    <div class="recruit">
     
        <div class="hot">
            <div class="condition">
                <div class="content">
                    <h1>天空之城签约摄影师招募</h1>
                    <p>“天空之城签约摄影师”项目汇聚了中国、美国、意大利、澳大利亚等全球数十个国家/地区的优秀航拍摄影师，在这里他们持续分享着自己独特视角下的世界，不断为大家呈现视觉盛宴。 如果你也擅长使用大疆产品拍出精彩的影像作品，如果你也想与众多优秀摄影师一起共创更多优质内容，如果你也期待自己的创作被更多人看见，现在我们诚邀你加入，共筑缤纷多彩的天空之城。</p>
                    
                    <div class="lit">
                        * 申请条件：需有 30 份公开展示的作品，且至少获得 1 次作品精选。
                    </div>
                </div>
            </div> 
        </div>
        <div class="container">
           <div class="main">
                <h1>你可获得</h1>
                <div class="box">
                    <div class="left">
                        <h2>荣誉认证</h2>
                        <p>专属徽章标识</p>
                        <p>精美签约证书</p>
                    </div>
                    <div class="right">
                        <img src="../assets/img/rec01 (1).png" alt="" class="auto-img">
                    </div>
                </div>
                <div class="box">
                    <div class="right">
                        <img src="../assets/img/rec01 (2).png" alt="" class="auto-img">
                    </div>
                    <div class="left">
                        <h2>合作机会</h2>
                        <p>新品合作</p>
                        <p>优质内容共创</p>
                    </div>
                </div>
                <div class="box">
                    <div class="left">
                        <h2>流量助推</h2>
                        <p>站内推荐</p>
                        <p>官方社媒推广资源倾斜</p>
                    </div>
                    <div class="right">
                        <img src="../assets/img/rec01 (3).png" alt="" class="auto-img">
                    </div>
                </div>
                <div class="box">
                    <div class="right">
                        <img src="../assets/img/rec01 (4).png" alt="" class="auto-img">
                    </div>
                    <div class="left">
                        <h2>专属福利</h2>
                        <p>签约礼盒、节日礼盒</p>
                        <p>新品免费借用测评</p>
                        <p>产品优惠券、兑换币等</p>
                    </div>
                </div>
                
           </div>
        </div>
        <div class="line"></div>
        <div class="btm">
            <div class="email">
                <img src="../assets/img/rec01 (1).svg" alt="" class="auto-img">
            </div>
            <h1>联系我们</h1>
            <p>skypixel.contact@dji.com</p>
        </div>
        <foot-navbar></foot-navbar>
    </div>
</template>

<script>
import FootNavbar from '../components/FootNavbar.vue';
    export default {
  components: { FootNavbar },
        
    }
</script>

<style lang="scss" scoped>
.recruit{
    .hot{
        width: 100%;
        height: 560px;
        background-image: url('../assets/img/activity.jpg');
        background-size: cover;
        background-position: 50%;
        display: flex;
        justify-content: center;
        margin-bottom: 155px;
        .condition{
            box-shadow: 0 0 8px #ccc;
            margin-top: 100px;
            width: 960px;
            height: 554px;
            border-radius: 5px;
            background-color: #fff;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            .content{
                width: 703px;
                // margin-bottom: 100px;
                h1{
                    margin-bottom: 25px;
                    text-align: center;
                    font-size: 48px;
                }
                p{
                    margin-bottom: 25px;
                    font-size: 18px;
                    text-align: center;
                }
                .lit{
                    font-size: 14px;
                    color: #999;
                    text-align: center;
                }
            }
        }
    }
    .main{
        width: 960px;
        margin: 0 auto;
        h1{
            font-size: 40px;
            text-align: center;
            margin: 64px 0;
        }
        .box{
            display: flex;
            height: 320px;
            margin-bottom: 32px;
            .left{
                h2{
                    font-size: 32px;
                    margin-bottom: 10px;
                }
                p{
                    color: #999;
                }
                display: flex;
                flex-direction: column;
                justify-content: center;
                width: 50%;
                padding: 0 48px;
                box-sizing: border-box;
            }
            .right{
                width: 50%;
            }
        }
    }
    .line{
        width: 100%;
        height: 1px;
        background-color: #eee;
    }
    .btm{
        padding: 64px 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .email{
            width: 64px;
            height: 64px;
            margin-bottom: 10px;
            }
        h1{
            font-size: 32px;
            margin-bottom: 24px;
        }
        p{
            font-size: 16px;
            color: #1088f2;
        }
    }
}
</style>